<template>
    <div id="forgot-password-backcont">
        <div class="forgot-password-content">
            <div class="forgot-password-title">忘记密码</div>
            <div class="forgot-password-user">
                <p>手机号</p>
                <el-input clearable v-model="phone" class="inptflex" placeholder="请输入手机号" />
                <div v-if="!isCounting" class="sms-send-btn" @click="sendSmsCode">发送短信验证码</div>
                <div v-else class="sms-send-btn" :disabled="isCounting">{{countdownText()}}</div>
            </div>
            <div class="forgot-password-user">
                <p>验证码</p>
                <el-input v-model="code" class="inptflex" placeholder="请输入6位验证码" />
            </div>
            <div class="forgot-password-user">
                <p>新密码</p>
                <el-input v-model="newPassword" show-password class="inptflex" placeholder="请输入新密码" />
            </div>
            <div class="forgot-password-user">
                <p>确认新密码</p>
                <el-input v-model="confirmPassword" show-password class="inptflex" placeholder="请确认新密码" />
            </div>
            <el-button @click="resetPassword" type="success" :loading="load" class="forgot-password-btn">重置密码并登录</el-button>
        </div>
    </div>
</template>

<script>
import { reactive, toRefs, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
export default {
    setup() {
        const { proxy } = getCurrentInstance()
        const router = useRouter()
        const user = reactive({
            phone: '',
            code: '',
            newPassword: '',
            confirmPassword: '',
            isCounting: false,
            countdown: 60,
            load: false
        })

        const getCountdownText = () => {
            return `${user.countdown}秒后重新发送`
        }

        // 发送短信验证码
        const sendSmsCode = async () => {
            if (!user.phone || user.phone.length!== 11) {
                new proxy.$tips('请输入正确的11位手机号', 'warning').mess_age()
                return
            }
            user.isCounting = true
            user.load = true
            user.load = false
            const countdownInterval = setInterval(() => {
                user.countdown--
                if (user.countdown === 0) {
                    clearInterval(countdownInterval)
                    user.isCounting = false
                    user.countdown = 60
                }
            }, 1000)
            new proxy.$tips('发送验证码成功','success').mess_age()
        }

        // 重置密码并登录
        const resetPassword = async () => {
            if (!user.code || user.code.length!== 6) {
                new proxy.$tips('请输入正确的6位验证码', 'warning').mess_age()
                return
            }
            if (user.newPassword!== user.confirmPassword) {
                new proxy.$tips('两次输入的密码不一致', 'warning').mess_age()
                return
            }
            user.load = true
            try {
                new proxy.$tips('密码重置成功', 'success').mess_age()
                router.push({ name: 'login' })
            } catch (e) {
                new proxy.$tips('服务器发生错误', 'error').mess_age()
            }
            user.load = false
        }

        return {
            ...toRefs(user),
            sendSmsCode,
            resetPassword,
            countdownText: getCountdownText
        }
    }
}
</script>

<style>
#forgot-password-backcont {
    background-color: #f5f5f5;
    padding: 20px;
    text-align: center;
}
.forgot-password-content {
    background-color: white;
    border-radius: 8px; 
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); 
    padding: 25px;
    width: 450px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.forgot-password-title {
    font-size: 22px;
    text-align: center;
    margin-bottom: 10px;
}
.forgot-password-user {
    display: flex;
    align-items: center;
    gap: 15px;
}
.forgot-password-user p {
    margin: 0;
    width: 90px;
    text-align: right;
    font-size: 16px;
}
.sms-send-btn {
    background-color: #409eff;
    color: white;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 14px;
}
.forgot-password-btn {
    width: 100%;
    padding: 10px;
    border-radius: 4px;
    font-size: 16px;
}
.sms-send-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}
.el-input {
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
    font-size: 14px;
}
</style>
    